import './index.css'
import PropTypes from 'prop-types';
function List(props){
    const fruits = props.items;
    const category = props.category;
    // const fruits = ["apple","orange","banana","etc"];
    // const fruits = [
    //     {id:1,name:"apple",calories:95},
    //     {id:2,name:"orange",calories:45},
    //     {id:3,name:"banana",calories:60},
    //     {id:4,name:"pineapple",calories:37}
    // ];
    // fruits.sort((a,b) => a.calories - b.calories); //升序
    // fruits.sort((a,b) => b.calories - a.calories); //降序
    // fruits.sort((a,b) => a.name.localeCompare(b.name));//升序
    // fruits.sort((a,b) => b.name.localeCompare(a.name));//降序

    // const lowCalFruit = fruits.filter(fruits => fruits.calories < 50); //过滤

    const listItems = fruits.map(fruit => 
        <li key ={fruit.id}>
        {fruit.name}:&nbsp; <b>{fruit.calories}</b>
        </li>
    )
    return (
        <div>
            <h3 className="list-category">{category}</h3>
            <ol className="list-items">{listItems}</ol>
        </div>
   
    )
}
List.prototype ={
    category : PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({id:PropTypes.number,name:PropTypes.string,calories:PropTypes.number}))
}

List.defaultProps = {
    category: 'Fruit',
    items:[]
}
export default List;